<template>
	<view>
		<view class="u-flex u-p-30">
			<view>
				<u-avatar :text="!userInfo.headIcon?userInfo.realName.substr(userInfo.realName.length - 1):''" mode="circle"
					bg-color="#0071C5" color="#FFFFFF" size="130"
					:src="($u.http.config.baseUrl + userInfo.headIcon)"></u-avatar>
			</view>
			<view class="u-p-l-30">
				<view class="real-name-label">
					{{userInfo.realName}}
				</view>
				<view class="employ-no-label">
					工号：{{userInfo.employNo}}
				</view>
			</view>
		</view>
		<view class="u-flex u-p-30">
			<view class="sub-info-box u-p-30 u-flex-1 u-m-r-20">
				<view class="s-icon">
					<text class="ym-custom ym-custom-sitemap"></text> 公司
				</view>
				<view class="s-label">
					{{userInfo.organizeName}}
				</view>
			</view>
			<view class="sub-info-box u-p-30 u-flex-1">
				<view class="s-icon">
					<text class="icon-ym icon-ym-mpUser"></text> 岗位
				</view>
				<view class="s-label">
					{{userInfo.positionName}}
				</view>
			</view>
		</view>
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				部门
			</view>
			<view class="info-item-value">
				{{userInfo.departmentName}}
			</view>
		</view>
		<!-- <view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				角色
			</view>
			<view class="info-item-value">
				{{userInfo.roleName}}
			</view>
		</view> -->
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				性别
			</view>
			<view class="info-item-value">
				{{gender[userInfo.gender]}}
			</view>
		</view>
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				生日
			</view>
			<view class="info-item-value">
				{{userInfo.birthday?$u.timeFormat(userInfo.birthday, 'yyyy-mm-dd'):''}}
			</view>
		</view>
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				手机
			</view>
			<view class="info-item-value">
				{{userInfo.mobilePhone}}
			</view>
		</view>
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				邮箱
			</view>
			<view class="info-item-value">
				{{userInfo.email}}
			</view>
		</view>
		<view class="u-flex u-row-between u-p-30">
			<view class="info-item-label">
				关于我们
			</view>
			<view class="info-item-value">
				v2.0
			</view>
		</view>
		<view class="u-p-32">
			<u-button class="sign-out-btn" @click="SignOut">退出</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					realName: ''
				},
				gender: ['保密', '男', '女']
			}
		},
		methods: {
			SignOut() {
				this.$u.vuex('vuex_token', '')
				this.$u.vuex('vuex_user', false)
				this.$u.vuex('vuex_used_work', false)
				this.$u.vuex('vuex_used_apply', false)
				this.$u.route({
					type: 'redirectTo',
					url: 'pages/users/sign-in'
				})
			}
		},
		onShow() {
			this.userInfo = this.$store.state.vuex_user.userInfo
			console.log(this.$store.state.vuex_user.userInfo)
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.real-name-label {
		font-size: 44rpx;
		font-weight: bold;
	}

	.employ-no-label {
		font-size: 24rpx;
		color: #999999;
	}

	.sub-info-box {
		min-height: 180rpx;
		border-radius: 20rpx;
		background-color: #F7F8FA;

		.s-icon {
			line-height: 50rpx;
			font-size: 32rpx;
			font-weight: bold;

			text {
				margin-right: 10rpx;
				font-size: 42rpx;
				font-weight: bold;
				color: #0372C5;
			}
		}

		.s-label {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.info-item-label {
		font-size: 28rpx;
		font-weight: bold;
	}

	.info-item-value {
		font-size: 24rpx;
		color: #999999;
	}

	.sign-out-btn {
		color: #333333;
		background: #F7F8FA;
	}
</style>
